<template>
		<view>
		      <scroll-view class="grace-tab-title grace-center" scroll-x="true" id="grace-tab-title">
            <view v-for="(tab, index) in tabs" :key="index" :class="[tabCurrentIndex == index ? 'grace-tab-current' : '']" :id="'tabTag-'+index" @tap="tabChange">{{tab.name}}</view>
        </scroll-view>
        <swiper class="grace-tab-swiper-full" :current="swiperCurrentIndex" @change="swiperChange" :style="{height:tabHeight+'px'}">
            <!-- 循环新闻项目 -->
            <swiper-item v-for="(news, newsIndex) in newsAll" :key="newsIndex">
                <scroll-view scroll-y="true" :data-scindex="newsIndex" @scrolltolower="scrollend">
                    <view class="grace-news-list" style="padding:25upx; width:700upx;">
                        <navigator v-for="(item, index) in news" :key="index">
                            <view class="grace-news-list-items">
                                <!-- <image src="../../static/imgs/banner-gui.png" class="grace-news-list-img grace-list-imgs-l" mode="widthFix"></image> -->
                                <view class="grace-news-list-title">
                                    <!-- 订单信息 -->
                                    <view  v-for="(item,newindex) in datas" :key="newindex">
                                        <view class="info">
                                    		<view class="info-1">
                                    			<p class="p1">{{item.deliveryTime}}</p>
                                    			<p class="p2">交易成功 |</p>
                                    			<p class="p3"><img src="../../static/delete.png" alt=""></p>
                                    		</view>
                                    <!-- 中间 -->
                                    		<view class="info-2">
                                    			<P><image :src="item.goods.goodsImgList[0].url" mode=""></image></P>
                                    			<P class="p1">{{item.goods.goodsName}}</P>
                                    			<P class="p2">￥{{item.goods.goodsPrice}}</P>
                                    			<P class="p3">x {{item.goodsNumber}}</P>
                                    			<P class="p4">查看产品使用说明</P>
                                    		</view>
                                    		<view class="info-3">
                                    			<P class="p3">￥{{item.goods.goodsPrice*item.goodsNumber}}</P>
                                    			<P class="p2">应付金额:</P>
                                    			<P class="p1">共{{item.goodsNumber}}件</P>
                                    			<view class="v1">
													
								                    <view>
														<button class="p4" @tap="gotofa()">申请发票</button>
													</view>
                                    			    
                                    				<!-- <P class="p5">再次购买</P> -->	 
                                    			</view>
                                    		</view>	
                                    <!-- 留空 -->
                                    	    <view class="v2"></view>
                                    	</view>
                                    </view>
                                </view>
                            </view>
                        </navigator>
                    </view>
                    <graceLoading :loadingType="tabs[newsIndex].loadingType"></graceLoading>
                </scroll-view>
            </swiper-item>
        </swiper>
		
		
			
		</view>
</template>

<script>
var _self;
//默认新闻数据（来自api请求）
//每个选项下面的新闻列表
var news = [
  { title: '新闻标题', desc: '新闻描述...' },
  { title: '新闻标题', desc: '新闻描述...' },
  { title: '新闻标题', desc: '新闻描述...' },
  { title: '新闻标题', desc: '新闻描述...' },
  { title: '新闻标题', desc: '新闻描述...' },
  { title: '新闻标题', desc: '新闻描述...' },
  { title: '新闻标题', desc: '新闻描述...' },
  { title: '新闻标题', desc: '新闻描述...' },
  { title: '新闻标题', desc: '新闻描述...' },
  { title: '新闻标题', desc: '新闻描述...' }
];
//对应下面3个标签的新闻内容数据
var newsAll = [news, news, news,news, news];
import graceLoading from "../../static/graceUI/components/graceLoading.vue"
export default {
    data() {
        return {
			
				datas:[],
				
            tabCurrentIndex: 0,
            swiperCurrentIndex: 0,
            tabHeight : 6000,
            tabs: [
                //标签名称 , 分类 id , 加载更多, 加载的页码
                { name: '全部', id: 'quanbu' , loadingType : 0, page : 1},
                { name: '待分配', id: 'daifenpei', loadingType: 0, page: 1},
                { name: '配送中', id: 'peisongzhong', loadingType: 0, page: 1},
				{ name: '待评价', id: 'daipingjia', loadingType: 0, page: 1},
				{ name: '已完成', id: 'yiwancheng', loadingType: 0, page: 1}
            ],
            newsAll: newsAll
        }
    },
    onLoad:function(){
        _self = this;
    },
	onLoad(){
		
			uni.request({
					url:'https://www.zunyishengshui.com/maishui/order/selectAllOrder',
					method:'POST',
					data:{
						userId:"12321312312313"
					},
					header:{
						
						'Content-Type': 'application/x-www-form-urlencoded', 
					},
					success: (res) => {
						console.log("成功");
						console.log(res);
						this.text = 'request success';
						this.datas = res.data.data;
						console.log(this.datas);
						// console.log(res.data.data.goodsImglist)
						
						
			},
			
			fail:err=>{
				console.log(err);
			},
			complete:()=>{}
				});	
				
		
	},
    onReady: function () {
        //获取屏幕高度及比例
        var winInfo = uni.getSystemInfo({
            success: function (res) {
                var windowHeight = res.windowHeight;
                //获取头部标题高度
                var dom = uni.createSelectorQuery().select('#grace-tab-title')
                dom.fields({size: true}, res2 => {
                    if(!res2){return ;}
                    //计算得出滚动区域的高度
                    _self.tabHeight = res.windowHeight;
                }).exec();
            }
        });
    },
    methods:{
		gotofa(){
			uni.navigateTo({
				url:"../../components/invoices/invoice",
			})
		},
		
		
        tabChange: function (e) {
            var index = e.target.id.replace('tabTag-', '');
            this.swiperCurrentIndex = index;
            this.tabCurrentIndex    = index;
        },
        swiperChange: function(e){
            var index = e.detail.current;
            this.tabCurrentIndex = index;
        },
        //每个选项滚动到底部
        scrollend:function(e){
            //获取是哪个选项滚动到底？
            var index = e.currentTarget.dataset.scindex;
            console.log(index);
            //可以利用 tabs 携带的分类id 与服务器交互请求对应分类的数据
            console.log(this.tabs[index].id);
            //加载更多的演示
            //判断当前是否正在加载
            if (this.tabs[index].loadingType === 1){
                return false;
            }
            //判断是否是最后一页
            console.log(this.tabs[index].page)
            if (this.tabs[index].page > 3){
                this.tabs[index].loadingType = 2;//全部
                return ;
            }
            this.tabs[index].loadingType = 1;//加载中
            //模拟延迟
            setTimeout(function(){
                _self.newsAll[index] = _self.newsAll[index].concat(news);
                //分页
                _self.tabs[index].page++;
                _self.tabs[index].loadingType = 0;//恢复加载状态
                //
            }, 1000);
        }
    },
    components:{
        graceLoading
    },
	
}
	
</script>

<style>
.top .top-1 {
	display: flex;
	width: 100%;
	height: 3.12rem;
}
#tabTag-2,#tabTag-1,#tabTag-3,#tabTag-4,#tabTag-5{
	margin-left:0.1rem;
}

/* 订单信息 */
.info .info-1 p img {
	left: 21.3rem;
	top: 8.25rem;
	width: 1.25rem;
	height: 1.25rem;
	/* background-color: rgba(115, 115, 115, 1); */
}
.info .info-1 .p1 {
	margin-top: 0.81rem;
	margin-left: 0.88rem;
	font-size: 0.88rem;
	line-height: 1.25rem;
}
.info .info-1 .p2 {
	/* float: right; */
	margin-left: 12.87rem;
	margin-top: -1.31rem;
	font-size: 0.81rem;
	line-height: 1.25rem;
}
.info .info-1 .p3 {
	/* float: right; */
	margin-top: -1.25rem;
	margin-right: 0.75rem;
	line-height: 1.25rem;
	float: right;
}
.info .info-1 {
	border-bottom: 1px solid #e5e5e5;
	height: 40px;
}
/* 第二个 */
.info .info-2 p image {
	margin-left: 1.75rem;
	margin-top: 0.625rem;
	width: 3.12rem;
	height: 3.12rem;
}
.info .info-2 .p1 {
	margin-top: -3.43rem;
	margin-left: 6.18rem;
	width: 17.58rem;
	height: 2.12rem;
	line-height: 1.06rem;
	color: rgba(16, 16, 16, 1);
	font-size: 0.75rem;
	text-align: left;
	font-family: PingFangSC-regular;
}
.info .info-2 .p2 {
	margin-right: 1.625rem;
	margin-top: -2.19rem;
	float: right;
	width: 3.31rem;
	height: 1.06rem;
	line-height: 1.06rem;
	color: rgba(77, 77, 77, 1);
	font-size: 0.75rem;
	text-align: right;
	font-family: PingFangSC-regular;
}
.info .info-2 .p3 {
	float: right;
	margin-left: 0.5rem;
	margin-top: -1.25rem;
	width: 3.02rem;
	height: 1rem;
	line-height: 1rem;
	color: rgba(133, 133, 133, 1);
	font-size: 0.74rem;
	/* text-align: right; */
	font-family: SFUIText-regular;
}
.info .info-2 .p4 {
	float: right;
	width: 6.62rem;
	height: 1.02rem;
	line-height: 1.02rem;
	color: rgba(59, 156, 219, 1);
	font-size: 12px;
	text-align: left;
	font-family: PingFangSC-regular;
}
.info .info-2 {
	border-bottom: 1px solid #e5e5e5;
	height: 5rem;
}
/* 第三次 */
.info .info-3 .p3 {
	color: rgba(59, 156, 219, 1);
	font-size: 0.75rem;
	text-align: right;
	font-family: PingFangSC-regular;
}
.info .info-3 .p1,
.info .info-3 .p2,
.info .info-3 .p3 {
	float: right;
	font-size: 0.75rem;
	margin-top: 0.625rem;
	margin-right: 0.625rem;
}

.info .info-3 .p5,.info .info-3 .p4 {
	float: right;
	left: 13.25rem;
	border: 1px solid #c9c9c9;
	border-radius: 1.37rem;
	width: 4.9rem;
	height: 1.62rem;
	line-height: 1.19rem;
	color: rgba(94, 94, 94, 1);
	font-size: 0.78rem;
	text-align: center;
	font-family: PingFangSC-regular;
	margin-top: 2.5rem;
	margin-right: 0.3rem;
	/* margin-left: 20px; */
}
.info .info-3 .v1 {
	margin-top: -1.25rem;
	margin-right: 0.625rem;
	float: right;
	width: 12.5rem;
	height: 5.3rem;
	margin-left: 4.3rem;
}
.info .info-3 {
	/* border-bottom:1px solid #e5e5e5; */
	height: 5rem;
}
.info .v2 {
	height: 0.5rem;
	width: 100%;
	background-color: #f0f0f0;
}
page{background:#FFFFFF;}
.grace-news-list-title{
	margin-top:-1.8rem;
}
</style>
